<template>
    <div class="search-page">
        <CommonHeader>
            <div>北京市开放科技论文与科学数据资源共享平台</div>
        </CommonHeader>
        <div class="common-wrap">
            <div>
                <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item>检索列表</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
            <div class="content-wrap">
                <div class="content-left">
                    <div class="img-box" v-if="showTheme">
                        <img :src="themeItem.src || 'img/default.png'" alt="">
                    </div>
                    <!-- <div class="left-item-title">资源类型</div>
                    <ul class="paper-type-list">
                        <li class="paper-type-item">
                            期刊论文({{ paperTotal }})
                        </li>
                        <li class="paper-type-item">
                            科学数据({{ dataTotal }})
                        </li>
                    </ul> -->
                    <!-- <div class="left-item-title">关键词</div> -->
                    <!-- <ul class="data-list">
                        <li class="data-item" v-for="(item, index) in count4obj.keyword || []" :key="index">
                            <a href="#" class="data-item_name">{{ item.kw }}</a>
                            <div class="data-item_count">({{ item.num }})</div>
                        </li>
                    </ul>
                    <div class="left-item-title">作者</div>
                    <ul class="data-list">
                        <li class="data-item" v-for="(item, index) in count4obj.author || []" :key="index">
                            <a href="#" class="data-item_name">{{ item.kw }}</a>
                            <div class="data-item_count">({{ item.num }})</div>
                        </li>
                    </ul>
                    <div class="left-item-title">机构</div>
                    <ul class="data-list">
                        <li class="data-item" v-for="(item, index) in count4obj.agency || []" :key="index">
                            <a href="#" class="data-item_name">{{ item.kw }}</a>
                            <div class="data-item_count">({{ item.num }})</div>
                        </li>
                    </ul> -->
                    <div class="data-list" v-loading="leftLoading">
                        <el-checkbox-group @change="changeCheck" v-model="checkList">
                            <div class="left-item-title" style="margin-top: 20px">关键词</div>
                            <div class="data-item" v-for="(item, index) in showCount4Obj.keyword || []"
                                :key="'keyword-' + index">
                                <el-checkbox class="data-item_name" :title="item.kw" :label="item.kw"></el-checkbox>
                                <div class="data-item_count">({{ item.num }})</div>
                            </div>
                            <div class="left-item-more-wrap">
                                <div class="left-item-more" @click="moreLeftItem(3)" v-show="!showAllKeywordFlag">更多</div>
                                <div style="margin-left: 4px;" class="left-item-more" @click="moreLeftItem(3, true)" v-show="hideAllKeywordFlag">收起</div>
                            </div>

                            <div class="left-item-title" style="margin-top: 20px">作者</div>
                            <div class="data-item" v-for="(item, index) in showCount4Obj.author || []" :key="'author-' + index">
                                <el-checkbox class="data-item_name" :title="item.kw" :label="item.kw"></el-checkbox>
                                <div class="data-item_count">({{ item.num }})</div>
                            </div>
                            <div class="left-item-more-wrap">
                                <div class="left-item-more" @click="moreLeftItem(1)" v-show="!showAllAuthorFlag">更多</div>
                                <div style="margin-left: 4px;" class="left-item-more" @click="moreLeftItem(1, true)" v-show="hideAllAuthorFlag">收起</div>
                            </div>

                            <div v-show="typeIndex !== 1">
                                <div class="left-item-title" style="margin-top: 20px">许可类型</div>
                                <div class="data-item" v-for="(item, index) in showCount4Obj.permission || []" :key="'permission-' + index">
                                    <el-checkbox class="data-item_name" :title="item.kw" :label="item.kw"></el-checkbox>
                                    <div class="data-item_count">({{ item.num }})</div>
                                </div>
                                <div class="left-item-more-wrap">
                                    <div class="left-item-more" @click="moreLeftItem(5)" v-show="!showAllPermissionFlag">更多</div>
                                    <div style="margin-left: 4px;" class="left-item-more" @click="moreLeftItem(5, true)" v-show="hideAllPermissionFlag">收起</div>
                                </div>
                            </div>
                            

                            <div class="left-item-title" style="margin-top: 20px">来源</div>
                            <div class="data-item" v-for="(item, index) in showCount4Obj.name || []" :key="'name-' + index">
                                <el-checkbox class="data-item_name" :title="item.kw" :label="item.kw"></el-checkbox>
                                <div class="data-item_count">({{ item.num }})</div>
                            </div>
                            <div class="left-item-more-wrap">
                                <div class="left-item-more" @click="moreLeftItem(2)" v-show="!showAllNameFlag">更多</div>
                                <div style="margin-left: 4px;" class="left-item-more" @click="moreLeftItem(2, true)" v-show="hideAllNameFlag">收起</div>
                            </div>

                            <!-- <div class="left-item-title" style="margin-top: 20px">机构</div>
                            <div class="data-item" v-for="(item, index) in showCount4Obj.agency || []" :key="'agency-' + index">
                                <el-checkbox class="data-item_name" :title="item.kw" :label="item.kw"></el-checkbox>
                                <div class="data-item_count">({{ item.num }})</div>
                            </div>
                            <div class="left-item-more-wrap">
                                <div class="left-item-more" @click="moreLeftItem(4)" v-show="!showAllAgencyFlag">更多</div>
                                <div style="margin-left: 4px;" class="left-item-more" @click="moreLeftItem(4, true)" v-show="hideAllAgencyFlag">收起</div>
                            </div> -->

                            <div class="left-item-title" style="margin-top: 20px">年代分布</div>
                            <div class="data-item" v-for="(item, index) in showCount4Obj.year || []" :key="'year-' + index">
                                <el-checkbox class="data-item_name" :title="item.kw" :label="item.kw"></el-checkbox>
                                <div class="data-item_count">({{ item.num }})</div>
                            </div>
                            <div class="left-item-more-wrap">
                                <div class="left-item-more" @click="moreLeftItem(6)" v-show="!showAllYearFlag">更多</div>
                                <div style="margin-left: 4px;" class="left-item-more" @click="moreLeftItem(6, true)" v-show="hideAllYearFlag">收起</div>
                            </div>

                            <div v-show="typeIndex === 1">
                                <div class="left-item-title" style="margin-top: 20px">共享范围</div>
                                <div class="data-item" v-for="(item, index) in showCount4Obj.scope || []" :key="'scope-' + index">
                                    <el-checkbox class="data-item_name" :title="item.kw" :label="item.kw"></el-checkbox>
                                    <div class="data-item_count">({{ item.num }})</div>
                                </div>
                                <div class="left-item-more-wrap">
                                    <div class="left-item-more" @click="moreLeftItem(7)" v-show="!showAllScopeFlag">更多</div>
                                    <div style="margin-left: 4px;" class="left-item-more" @click="moreLeftItem(7, true)" v-show="hideAllScopeFlag">收起</div>
                                </div>
                            </div>
                        </el-checkbox-group>
                    </div>
                </div>
                <div class="content-right">
                    <!-- <div class="text-box" v-if="showTheme">
                        <p>
                            推进碳达峰碳中和是党中央经过深思熟虑作出的重大战略决策，是我们对国际社会的庄严承诺，也是推动高质量发展的内在要求。平台于2022年6月推出“双碳专题”，聚焦热点文章。欢迎参与相关交流、讨论！
                        </p>
                    </div> -->

                    <el-radio-group v-show="!showTheme" @input="changeType" v-model="typeIndex">
                        <el-radio-button :label="2">期刊论文</el-radio-button>
                        <el-radio-button :label="1">科学数据</el-radio-button>
                    </el-radio-group>

                    <div style="margin-top: 20px">
                        <el-input placeholder="请输入检索内容" v-model="searchText" clearable class="input-with-select">
                            <el-select v-model="searchType" slot="prepend" placeholder="请选择">
                                <el-option label="全部" :value="0"></el-option>
                                <el-option label="作者" :value="1"></el-option>
                                <el-option label="标题" :value="2"></el-option>
                                <el-option label="关键词" :value="3"></el-option>
                            </el-select>
                            <div slot="append">
                                <div style="padding: 4px 0">
                                    <el-button style="margin-right: 4px" type="primary" :loading="loading" @click="() => {
                                        this.checkList = []
                                        this.kvList = []
                                        getData({
                                            pageNum: 1
                                        })
                                    }">
                                        <i class="el-icon-search"></i>
                                        检索
                                    </el-button>
                                    <el-button :loading="loading"
                                        @click="() => getSecondData({ pageNum: 1 })">二次检索</el-button>
                                    <!-- <el-button type="primary">高级搜索</el-button> -->
                                </div>

                            </div>
                        </el-input>
                    </div>

                    <div class="selected-text">
                        共<span class="count">{{ total }}</span>条结果
                    </div>

                    <div class="check-wrap">
                        <div>已选条件：</div>
                        <el-tag effect="plain" v-show="!!firstText" @close="firstText = ''; reSearch()" closable>{{ firstText }}</el-tag>
                        <el-tag style="margin-left: 10px" effect="plain" v-show="!!secondText" @close="secondText = ''; reSearch()" closable>{{ secondText }}</el-tag>
                        <el-tag style="margin-left: 10px" v-for="item in checkList" :key="item" effect="plain"
                            @close="removeCheck(item)" closable>
                            {{ item }}
                        </el-tag>
                    </div>

                    <div>
                        <el-checkbox v-model="selectAll" @change="selectedAll"
                            :disabled="!dataList.length > 0">全选</el-checkbox>
                        <el-button style="margin-left: 20px" :disabled="!selectedIds || selectedIds.length === 0"
                            size="small" @click="exportData">导出</el-button>
                    </div>

                    <!-- 分割线 -->
                    <ul class="article-list">
                        <li class="article-item" v-for="item in dataList" :key="item.id">
                            <div class="article-item_content">
                                <div style="display: flex; align-items: center;">
                                    <el-checkbox :value="selectedIds.includes(item.id)"
                                        :checked="selectedIds.includes(item.id)"
                                        @change="selectCheckbox($event, item)"></el-checkbox>&nbsp;
                                    <el-button style="margin-left: 6px" type="text" class="article-link"
                                        @click="goDetail(item)">
                                        {{ typeIndex === 1 ? item.datasetNameCn : item.oatitle }}
                                    </el-button>
                                    <span class="article-type">{{ typeIndex === 1 ? item.subjectClass : item.oasubjectstr }}</span>
                                </div>
                                <p v-show="typeIndex !== 1" class="article-date">
                                    <span v-show="item.oacollectiontitle" style="margin-right: 10px">{{
                                        item.oacollectiontitle }}</span>
                                    <span>{{ item.oapublicationdate }}</span>
                                </p>
                                <p class="artitle-text">
                                    {{ typeIndex === 1 ? item.author : item.oaauthors?.join(';') }}
                                </p>
                                <p v-show="typeIndex === 1 && item.submitAgency" class="artitle-text">
                                    {{ item.submitAgency }}
                                </p>
                                <p v-show="typeIndex === 1 && item.sharedScope" class="artitle-text">
                                    共享范围：{{ item.sharedScope }}
                                </p>
                                <p v-show="typeIndex === 1" class="artitle-text">
                                    {{ item.keyword }}
                                </p>
                                <p v-show="typeIndex !== 1" class="artitle-text">
                                    License: {{ item.oapermissions?.join(',') }}
                                </p>
                                <!-- <p v-show="typeIndex !== 1" class="artitle-text">
                                    {{ item.oacontributortoinsstr }}
                                </p> -->
                                <!-- <p class="artitle-text">
                                    Article License: CC BY
                                </p> -->

                                <p class="artitle-text content-3-limit">
                                    {{ typeIndex === 1 ? item.introduction : item.oaabstract }}
                                </p>
                                <div v-show="typeIndex !== 1" class="article-share">
                                    <a class="share-link" :href="item.oaaccessurls"
                                        target="_blank">原文链接</a> &nbsp;
                                    <img src="@/assets/img/link.png" style="height: 20px;">
                                    <template v-if="item.oaaccessurls && item.oajapdfroid">
                                        &nbsp; | &nbsp;
                                    </template>
                                    <a v-show="item.oajapdfroid" class="share-link" 
                                        :href="'http://gooa.las.ac.cn/apipaperc/api/paper/pdfdown?wid='+ item.oaworkid + '&roid=' + item.oajapdfroid"
                                        target="_blank">全文</a>&nbsp;
                                    <img v-show="item.oajapdfroid" src="@/assets/img/pdf.png" style="height: 20px;">&nbsp;
                                </div>
                                <!-- <div class="article-share">
                                    <a class="share-link" href="http://dx.doi.org/10.1038/s41598-023-33753-4"
                                        target="_blank">原文链接</a> &nbsp;
                                    <img src="@/assets/img/link.png" style="height: 20px;">&nbsp; | &nbsp;
                                    <a class="full-link" href="http://dx.doi.org/10.1038/s41598-023-33753-4"
                                        target="_blank">全文</a>&nbsp;
                                    <img src="@/assets/img/article.png" style="height: 20px;">&nbsp;
                                    <span>下载&nbsp;1</span>&nbsp; | &nbsp;
                                    <img src="@/assets/img/write.png" style="height: 20px;"> &nbsp;
                                    <span>评论&nbsp;0</span>&nbsp; | &nbsp;
                                    <img @click="shareWechat('http://dx.doi.org/10.1038/s41598-023-33753-4')"
                                        src="@/assets/img/wechat.png" style="height: 20px;">&nbsp;
                                    <img @click="shareQQ" src="@/assets/img/qzone.png" style="height: 20px;">&nbsp;
                                    <img @click="shareSina" src="@/assets/img/weibo.png" style="height: 20px;">&nbsp;
                                    <span>分享&nbsp;0</span>&nbsp; | &nbsp;
                                    <span>阅读&nbsp;3</span>
                                </div> -->
                            </div>
                            <div class="article-item_other">
                                <!-- <div class="other">
                                    <img style="width: 30px; height: 30px;" src="@/assets/img/email.png">
                                    <a
                                        href="mailto:1914009853@qq.com?subject=PaperCommons%E8%AE%BA%E6%96%87%E4%BA%A4%E6%B5%81%E4%BC%9A">
                                        <span style="color: #2d8cf0">联系作者</span>
                                    </a>
                                </div> -->
                            </div>
                        </li>
                    </ul>

                    <div style="padding: 10px; font-size: 14px; color: #666;" v-if="!dataList || dataList.length === 0">
                        暂无数据
                    </div>

                    <div v-if="total > 0" class="pagination">
                        <el-pagination size="large" @size-change="handleSizeChange" @current-change="handleCurrentChange"
                            :current-page="pageObj.pageNum" :page-sizes="[10, 20, 50]" :page-size="pageObj.pageSize"
                            layout="total, sizes, prev, pager, next, jumper" :total="total">
                        </el-pagination>
                    </div>

                    <!-- 分割线 -->
                </div>
            </div>
        </div>
        <CommonFooter />
    </div>
</template>

<script>
import { post } from '@/common/request';
import { paperList } from "@/data/home";
const StaticCount = 10
export default {
    name: 'search-page',
    data() {
        return {
            typeIndex: 1, //  1 开放论文  2 科学数据
            searchType: 0, // 1 作者 2标题 3关键字 4机构
            isFirstLoad: true,
            firstCol: '',
            theme: '', //  主题
            themeItem: {},
            checkList: [],
            kvList: [],
            paperList: paperList,
            showTheme: false,
            searchText: '',
            firstType: "",
            firstText: "",
            secondType: "",
            secondText: "",
            selectedIds: [],
            selectAll: false,
            loading: false,
            leftLoading: false,
            currentPage: 1,
            dataList: [],
            count4obj: {},
            showCount4Obj: {},

            count4objSummary: [],

            showAllKeywordFlag: false,
            hideAllKeywordFlag: false,

            showAllAuthorFlag: false,
            hideAllAuthorFlag: false,

            showAllAgencyFlag: false,
            hideAllAgencyFlag: false,

            showAllNameFlag: false,
            hideAllNameFlag: false,

            showAllPermissionFlag: false,
            hideAllPermissionFlag: false,

            showAllYearFlag: false,
            hideAllYearFlag: false,

            showAllScopeFlag: false,
            hideAllScopeFlag: false,

            total: 0,
            dataTotal: 0,
            paperTotal: 0,
            pageObj: {
                pageNum: 1,
                pageSize: 10,
            },
        }
    },
    mounted() {
        this.init();
    },
    methods: {
        // 初始化参数
        init() {
            this.typeIndex = +this.$route.params.type || 1;
            this.theme = +this.$route.params.theme || 'theme';
            this.searchText = decodeURIComponent(this.$route.query.keyword || '');
            const isPaper = this.$route.query.isPaper || '';
            this.searchType = 0;
            this.isFirstLoad = true
            this.firstCol = isPaper ? 'oacollectiontitle' : null;
            this.firstText = decodeURIComponent(this.$route.query.keyword || '');
            this.secondType = '';
            this.secondText = '';
            this.$router.replace(`/search/${this.typeIndex}/${this.theme}?keyword=`)
            this.getData();

            const themeItem = this.paperList.find(item => item.id === this.theme)
            if (themeItem) {
                this.showTheme = true
                this.themeItem = themeItem
            } else {
                this.showTheme = false
            }
        },
        goDetail(item) {
            if (this.typeIndex === 1) {
                this.$router.push(`/data/${item.id}`)
                return
            }
            this.$router.push(`/detail/${item.id}`)
        },
        selectCheckbox(flag, d) {
            if (flag) {
                this.selectedIds.push(d.id)
            } else {
                this.selectedIds = this.selectedIds.filter(id => id !== d.id)
            }
            if (this.selectedIds.length === this.dataList.length) {
                this.selectAll = true
            } else {
                this.selectAll = false
            }
        },
        selectedAll(flag) {
            if (flag) {
                this.selectedIds = this.dataList.map(d => d.id)
            } else {
                this.selectedIds = []
            }
        },
        async exportData() {
            const data = await post('/dataset/exportTableList', {
                type: this.typeIndex,
                ids: this.selectedIds,
            }, { responseType: 'blob' })
            if (!data) {
                this.$message.error('导出失败')
                return
            }
            const blob = new Blob([data], { type: 'application/vnd.ms-excel;charset=utf-8' })
            // 创建下载地址以及a标签,并且模拟a标签的点击事件进行下载文件。
            const url = window.URL.createObjectURL(blob)
            const aLink = document.createElement('a')
            aLink.style.display = 'none'
            aLink.download = '导出文件.xls'
            aLink.href = url
            document.body.appendChild(aLink)
            aLink.click()
            window.URL.revokeObjectURL(aLink.href)
            document.body.removeChild(aLink)
        },
        //分享到QQ空间
        shareQQ(title, cid, picurl) {
            let url = this.getShareUrl(cid);
            let shareqqzonestring = 'http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?summary=' +
                encodeURIComponent(title) +
                '&url=' + encodeURI(url) + '&pics=' + picurl;
            window.open(shareqqzonestring, '_blank');
            //注意：仅分享不累记次数
        },
        //分享到新浪微博
        shareSina(title, cid, picurl) {
            let url = this.getShareUrl(cid);
            var sharesinastring = 'http://v.t.sina.com.cn/share/share.php?title=' + encodeURIComponent(title) +
                '&url=' + url +
                '&content=utf-8&sourceUrl=' + encodeURI(url) + '&pic=' + picurl;
            window.open(sharesinastring, '_blank');
            //注意：仅分享不累记次数
        },
        //分享到微信，只复制地址
        shareWechat(title) {
            navigator.clipboard.writeText(title).then(() => {
                this.$message.success('已复制到剪切板')
            })
        },
        getShareUrl(cid) {
            return window.location.origin + '/#/paper?coid=' + cid;
        },
        // 查询数据
        async fectchData(obj = {}, flag) {
            this.loading = true;
            const params = {
                ...this.pageObj,
                ...obj,
                type: this.typeIndex,
                col: this.isFirstLoad ? this.firstCol : (this.firstType || null),
                val: this.firstText,
                col2: this.secondType || null,
                val2: this.secondText,
                kvList: this.kvList,
            }
            this.isFirstLoad = false

            // const params2 = {
            //     ...params,
            //     type: this.typeIndex === 1 ? 2 : 1,
            // }
            const res = await post('/dataset/searchList', params).catch(err => {
                this.loading = false;
                return { message: String(err) }
            })

            // const res2 = await post('/dataset/searchList', params2).catch(err => {
            //     return { message: String(err) }
            // })
            this.loading = false;
            if (res?.code === 200) {
                this.total = res.data?.list?.total || 0;
                this.dataTotal = params.type === 1 ? res.data?.list?.total : 0;
                this.paperTotal = params.type === 2 ? res.data?.list?.total : 0;
                this.dataList = res.data?.list?.list || [];
                this.getLeftData(params);
                if (flag) {
                    return
                }
                this.checkList = [];
                this.kvList = [];
                this.firstType = this.searchType;
                this.firstText = this.searchText;
                return
            }
            // if(res2?.code === 200){
            //     if(params2.type === 1){
            //         this.dataTotal = res2.data?.list?.total || 0;
            //     }else{
            //         this.paperTotal = res2.data?.list?.total || 0;
            //     }
            // }
            this.$message.error(res?.message || '查询失败')
        },
        // 左侧数据汇总
        async getLeftData(params) {
            this.leftLoading = true
            const res = await post('/dataset/count4KeyWords', params).catch(err => {
                return { message: String(err) }
            })
            this.leftLoading = false
            if (res?.code === 200) {
                this.count4obj = res.data || {};
                this.showCount4Obj = {
                    keyword: this.count4obj?.keyword?.slice(0, StaticCount),
                    author: this.count4obj?.author?.slice(0, StaticCount),
                    agency: this.count4obj?.agency?.slice(0, StaticCount),
                    name: this.count4obj?.name?.slice(0, StaticCount),
                    permission: this.count4obj?.permission?.slice(0, StaticCount),
                    year: this.count4obj?.year?.slice(0, StaticCount),
                    scope: this.count4obj?.scope?.slice(0, StaticCount),
                }
                this.hideAllAgencyFlag = false
                this.hideAllAuthorFlag = false
                this.hideAllKeywordFlag = false
                this.hideAllNameFlag = false
                this.hideAllPermissionFlag = false
                this.hideAllYearFlag = false
                if(this.count4obj?.keyword?.length === this.showCount4Obj?.keyword?.length){
                    this.showAllKeywordFlag = true
                }else{
                    this.showAllKeywordFlag = false
                }
                if(this.count4obj?.author?.length === this.showCount4Obj?.author?.length){
                    this.showAllAuthorFlag = true
                }else{
                    this.showAllAuthorFlag = false
                }
                if(this.count4obj?.agency?.length === this.showCount4Obj?.agency?.length){
                    this.showAllAgencyFlag = true
                }else{
                    this.showAllAgencyFlag = false
                }
                if(this.count4obj?.name?.length === this.showCount4Obj?.name?.length){
                    this.showAllNameFlag = true
                }else{
                    this.showAllNameFlag = false
                }
                if(this.count4obj?.permission?.length === this.showCount4Obj?.permission?.length){
                    this.showAllPermissionFlag = true
                }else{
                    this.showAllPermissionFlag = false
                }
                if(this.count4obj?.year?.length === this.showCount4Obj?.year?.length){
                    this.showAllYearFlag = true
                }else{
                    this.showAllYearFlag = false
                }
                if(this.count4obj?.scope?.length === this.showCount4Obj?.scope?.length){
                    this.showAllScopeFlag = true
                }else{
                    this.showAllScopeFlag = false
                }
                this.count4objSummary = [
                    ...res.data?.keyword?.map(v => ({ key: 3, value: v.kw })) || [],
                    ...res.data?.author?.map(v => ({ key: 1, value: v.kw })) || [],
                    ...res.data?.agency?.map(v => ({ key: 4, value: v.kw })) || [],
                    ...res.data?.name?.map(v => ({ key: 2, value: v.kw })) || [],
                    ...res.data?.permission?.map(v => ({ key: 5, value: v.kw })) || [],
                    ...res.data?.year?.map(v => ({ key: 6, value: v.kw })) || [],
                    ...res.data?.scope?.map(v => ({ key: 7, value: v.kw })) || [],
                ]
                return
            }
        },
        // 更多展开 1关键词 2作者 3许可类型
        moreLeftItem(type, hideFlag){
            // hideFlag true 收起
            if(type===3){
                if(hideFlag){
                    this.showCount4Obj.keyword = this.count4obj?.keyword?.slice(0, StaticCount)
                    this.hideAllKeywordFlag = false
                    if(this.count4obj?.keyword?.length === this.showCount4Obj?.keyword?.length){
                        this.showAllKeywordFlag = true
                    }else{
                        this.showAllKeywordFlag = false
                    }
                    return 
                }
                this.showCount4Obj.keyword = this.count4obj?.keyword?.slice(0, StaticCount + this.showCount4Obj.keyword.length)
                this.hideAllKeywordFlag = true
                if(this.count4obj?.keyword?.length === this.showCount4Obj?.keyword?.length){
                    this.showAllKeywordFlag = true
                }else{
                    this.showAllKeywordFlag = false
                }
            }else if(type === 1){
                if(hideFlag){
                    this.showCount4Obj.author = this.count4obj?.author?.slice(0, StaticCount)
                    this.hideAllAuthorFlag = false
                    if(this.count4obj?.author?.length === this.showCount4Obj?.author?.length){
                        this.showAllAuthorFlag = true
                    }else{
                        this.showAllAuthorFlag = false
                    }
                    return 
                }
                this.hideAllAuthorFlag = true
                this.showCount4Obj.author = this.count4obj?.author?.slice(0, StaticCount + this.showCount4Obj.author.length)
                if(this.count4obj?.author?.length === this.showCount4Obj?.author?.length){
                    this.showAllAuthorFlag = true
                }else{
                    this.showAllAuthorFlag = false
                }
            }else if(type === 4){
                if(hideFlag){
                    this.showCount4Obj.agency = this.count4obj?.agency?.slice(0, StaticCount)
                    this.hideAllAgencyFlag = false
                    if(this.count4obj?.agency?.length === this.showCount4Obj?.agency?.length){
                        this.showAllAgencyFlag = true
                    }else{
                        this.showAllAgencyFlag = false
                    }
                    return 
                }
                this.hideAllAgencyFlag = true
                this.showCount4Obj.agency = this.count4obj?.agency?.slice(0, StaticCount + this.showCount4Obj.agency.length)
                if(this.count4obj?.agency?.length === this.showCount4Obj?.agency?.length){
                    this.showAllAgencyFlag = true
                }else{
                    this.showAllAgencyFlag = false
                }
            }else if(type === 2){
                if(hideFlag){
                    this.showCount4Obj.name = this.count4obj?.name?.slice(0, StaticCount)
                    this.hideAllNameFlag = false
                    if(this.count4obj?.name?.length === this.showCount4Obj?.name?.length){
                        this.showAllNameFlag = true
                    }else{
                        this.showAllNameFlag = false
                    }
                    return 
                }
                this.hideAllNameFlag = true
                this.showCount4Obj.name = this.count4obj?.name?.slice(0, StaticCount + this.showCount4Obj.name.length)
                if(this.count4obj?.name?.length === this.showCount4Obj?.name?.length){
                    this.showAllNameFlag = true
                }else{
                    this.showAllNameFlag = false
                }
            }
            else if(type === 5){
                if(hideFlag){
                    this.showCount4Obj.permission = this.count4obj?.permission?.slice(0, StaticCount)
                    this.hideAllPermissionFlag = false
                    if(this.count4obj?.permission?.length === this.showCount4Obj?.permission?.length){
                        this.showAllPermissionFlag = true
                    }else{
                        this.showAllPermissionFlag = false
                    }
                    return 
                }
                this.hideAllPermissionFlag = true
                this.showCount4Obj.permission = this.count4obj?.permission?.slice(0, StaticCount + this.showCount4Obj.permission.length)
                if(this.count4obj?.permission?.length === this.showCount4Obj?.permission?.length){
                    this.showAllPermissionFlag = true
                }else{
                    this.showAllPermissionFlag = false
                }
            }
            else if(type === 6){
                if(hideFlag){
                    this.showCount4Obj.year = this.count4obj?.year?.slice(0, StaticCount)
                    this.hideAllYearFlag = false
                    if(this.count4obj?.year?.length === this.showCount4Obj?.year?.length){
                        this.showAllYearFlag = true
                    }else{
                        this.showAllYearFlag = false
                    }
                    return 
                }
                this.hideAllYearFlag = true
                this.showCount4Obj.year = this.count4obj?.year?.slice(0, StaticCount + this.showCount4Obj.year.length)
                if(this.count4obj?.year?.length === this.showCount4Obj?.year?.length){
                    this.showAllYearFlag = true
                }else{
                    this.showAllYearFlag = false
                }
            }else if(type === 7){
                if(hideFlag){
                    this.showCount4Obj.scope = this.count4obj?.scope?.slice(0, StaticCount)
                    this.hideAllScopeFlag = false
                    if(this.count4obj?.scope?.length === this.showCount4Obj?.scope?.length){
                        this.showAllScopeFlag = true
                    }else{
                        this.showAllScopeFlag = false
                    }
                    return 
                }
                this.hideAllScopeFlag = true
                this.showCount4Obj.scope = this.count4obj?.scope?.slice(0, StaticCount + this.showCount4Obj.scope.length)
                if(this.count4obj?.scope?.length === this.showCount4Obj?.scope?.length){
                    this.showAllScopeFlag = true
                }else{
                    this.showAllScopeFlag = false
                }
            }
        },
        // 搜索
        async getData(obj = {}) {
            this.firstType = this.searchType;
            this.firstText = this.searchText;
            this.secondType = '';
            this.secondText = '';
            this.selectedIds = [];
            this.fectchData(obj)
        },
        // 二次搜索
        async getSecondData(obj = {}) {
            this.secondType = this.searchType;
            this.secondText = this.searchText;
            this.checkList = [];
            this.kvList = [];
            this.fectchData(obj)
        },
        handleSizeChange(pageSize) {
            this.pageObj.pageSize = pageSize;
            this.pageObj.pageNum = 1;
            this.fectchData(null, true);
        },
        handleCurrentChange(pageNum) {
            this.pageObj.pageNum = pageNum;
            this.fectchData(null, true);
        },
        reSearch() {
            this.pageObj.pageNum = 1;
            this.fectchData(null, true)
        },
        changeCheck() {
            this.kvList = this.checkList.map(key => this.count4objSummary.find(item => item.value === key)).filter(Boolean)
            this.reSearch()
        },
        removeCheck(name) {
            this.checkList = this.checkList.filter(d => d !== name)
            this.kvList = this.kvList.filter(d => d.value !== name)
            this.reSearch()
        },
        changeType() {
            this.checkList = [];
            this.kvList = [];
            this.getData()
        }
    }
}
</script>

<style lang="less" scoped>
/deep/ .el-radio-button:first-child .el-radio-button__inner,
/deep/ .el-radio-button:last-child .el-radio-button__inner {
    border-radius: 0;
}

.content-wrap {
    padding: 30px 0;
    display: flex;

    .content-left {
        width: 260px;
    }

    .content-right {
        margin-left: 10px;
        border-left: 1px solid #777;
        padding-left: 20px;
        flex: 1;
        max-width: 1000px;
    }
}

.paper-type-list {
    margin-bottom: 20px;

    .paper-type-item {
        padding: 4px 0;
        display: flex;
        font-size: 21px;
        line-height: 30px;
    }
}

.check-wrap {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    /deep/ .el-tag{
        margin-bottom: 6px;
    }
}

.data-list {
    margin-bottom: 20px;

    .data-item {
        padding: 2px 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 16px;
        line-height: 20px;

        .data-item_name {
            width: 200px;
            white-space: nowrap;
            // overflow: hidden;
            // text-overflow: ellipsis;
            font-size: 21px;
            color: #000;
            text-decoration: none;


            &.mark {
                color: #f00;
            }

            /deep/ .el-checkbox__input {
                margin-top: -10px;

            }

            /deep/ .el-checkbox__label {
                line-height: 20px;
                font-size: 18px;
                width: 176px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
        }

        .data-item_count {
            flex: 1;
            color: #aaa;
            text-align: right;
        }
    }
}

.img-box {
    margin-bottom: 10px;
    background: #f7f7f7;
    border: 1px solid #eee;

    img {
        width: 170px;
        height: 100px;
    }
}

.text-box {
    margin-bottom: 10px;
    border: 1px solid #eee;
    height: 102px;
    background: #f7f7f7;

    p {
        padding: 1.25rem 1.5rem;
        color: #666;
        line-height: 1.8rem;
    }
}

.left-item-title {
    margin-bottom: 10px;
    font-size: 21px;
    font-weight: bold;
    line-height: 30px;
}

.left-item-more-wrap{
    display: flex;
    align-items: center;
}

.left-item-more {
    margin-bottom: 10px;
    font-size: 16px;
    font-weight: bold;
    line-height: 24px;
    cursor: pointer;
    &:hover{
        text-decoration: underline;
    }
}

.input-with-select {
    /deep/ .el-input__inner {
        height: 50px;
        line-height: 50px;
        border: 2px solid @primaryColor;
        color: #000;
        border-left: none;
        border-right: none;

        &::placeholder {
            color: #aaa;
        }
    }

    /deep/ .el-input-group__prepend {
        .el-input__inner {
            height: 46px;
            line-height: 46px;
        }

        .el-select {
            text-align: right;
            width: 120px;
            background: #fff;
            border: 2px solid @primaryColor;
            border-right: none;
            color: #000;

            .el-input__inner {
                text-align: center;
            }

            &::placeholder {
                color: #aaa;
            }

            .el-input__icon {
                color: #000;
            }
        }
    }

    /deep/ .el-input-group__append {
        background: #fff;
        border: 2px solid @primaryColor;
        border-left: none;
        border-radius: 0;

        .el-button {
            font-weight: normal;
            border-radius: 0;

            &:hover {
                opacity: .9;
            }
        }

        .el-button--default {
            margin: 0 0 0 4px;
            color: #000;
            background: #ddd;
        }

        .el-button--primary {
            background: @primaryColor;
            color: #fff;
        }
    }
}

.selected-text {
    padding: 10px 0;
    font-size: 18px;
    line-height: 30px;

    .count {
        margin: 0 2px;
        font-size: 20px;
        font-weight: bold;
        color: #ec6941;
    }
}

/deep/ .el-checkbox .el-checkbox__inner {
    border-color: #aaa;
}

.article-item {
    width: 100%;
    margin-bottom: 30px;
    padding: 10px 0;
    display: flex;
    border-bottom: 1px solid #ddd;

    .article-item_content {
        flex: 1;
    }

    .article-item_other {
        width: 100px;

        .other {
            display: flex;
            align-items: center;

            img {
                margin-right: 4px;
                width: 30px;
                height: 30px;
            }

            a {
                width: 80px;
                font-size: 12px;
                text-decoration: none;
                color: #aaa;
            }
        }
    }

    .article-link {
        padding-left: 0;
        font-size: 21px;
        font-weight: 400;
        color: #000;
        text-decoration: none;
        white-space: pre-wrap;
        text-align: left;

        &:hover {
            text-decoration: underline;
        }
    }

    .article-type {
        color: #777;
        font-size: 21px;
        font-weight: bold;
        margin-left: 10px;
        font-style: italic;
    }

    .article-date {
        padding-left: 28px;
        font-size: 18px;
        font-style: italic;
        font-weight: bolder;
        line-height: 30px;
        color: #666;
    }

    .artitle-text {
        padding-left: 28px;
        font-size: 18px;
        line-height: 30px;
        color: #777;
    }

    .content-3-limit {
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        text-overflow: ellipsis;
    }

    .article-share {
        padding: 4px 0 4px 28px;
        display: flex;
        align-items: center;
        font-size: 14px;
        color: #666;
    }

    .share-link {
        color: @lightColor;
        text-decoration: none;

        &:hover {
            text-decoration: underline;
        }
    }

    .full-link {
        color: #000;
        text-decoration: none;
    }
}

.pagination {
    padding: 10px 0;

    /deep/ .el-pagination__total,
    /deep/ .el-pagination__jump {
        font-size: 16px;
    }

    /deep/ .el-input__inner {
        font-size: 16px;
        height: 30px;
        line-height: 30px;
    }

    /deep/ .number {
        font-size: 15px;
    }
}
</style>